<template>
	<b-layout-index>
		<navbar bgcolor="#fff" :title="$t('添加地址')"></navbar>
		<view class="bg-white tag pd-10 font-size-12">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="100"
				:labelStyle="{fontSzie:'10px'}">
				<u-form-item :label="$t('姓名')" prop="name" borderBottom>
					<u--input v-model="form.name" border="none" :placeholder="$t('请输入姓名')"></u--input>
					<view slot="right" class="pd-right-5 pd-right-5" @click="getContact">

						<iconfont size="24" :color="color.primary" icon="icon-wode" />

					</view>
				</u-form-item>
				<u-form-item :label="$t('手机号码')" prop="phoneNumber" borderBottom>
					<u--input v-model="form.phoneNumber" border="none" :placeholder="$t('请输入手机号码')"></u--input>
					<view slot="right" class="pd-right-5 pd-right-5" @click="getContact">

						<iconfont size="24" :color="color.primary" icon="icon-dianhua" />

					</view>
				</u-form-item>
				<u-form-item :label="$t('所在地址')" prop="address" borderBottom>
					<u--input v-model="form.address" border="none" :placeholder="$t('请输入所在地址')"></u--input>
					<view slot="right" class="pd-right-5 pd-right-5" @click="chooseLocation">


						<iconfont size="24" :color="color.primary" icon="icon-weizhi1" />

					</view>
				</u-form-item>
				<u-form-item :label="$t('详细地址')" prop="addressInfo" borderBottom>
					<u--textarea v-model="form.addressInfo" :placeholder="$t('请输入详细地址')"></u--textarea>
				</u-form-item>
			</u--form>
			<u-cell :border="false">
				<view slot="title" class="font-bold font-size-12">{{$t('设置默认地址')}}</view>
				<view slot="value" class="">
					<switch v-model="form.moren" :active-background-color="color.primary" :color="color.primary">
					</switch>
				</view>
				<view slot="label" class="font-size-12">{{$t('每次下单会默认推荐地址')}}</view>
			</u-cell>

		</view>
		<view class="mg-top-10 pd-20">
			<u-button @click="submit" :color="color.primary" shape="circle" type="primary">{{$t('提交')}}</u-button>
			<!-- 			<u-button @click="getL">Open</u-button> -->
		</view>
	</b-layout-index>
</template>

<script>
	import {
		editAddress,
		findByIdAddress
	} from '@/api/user.js'
	export default {
		data() {
			return {

				form: {
					address: "",
					addressInfo: "",
					addressName: "",
					id: 0,
					latitude: 0,
					longitude: 0,
					name: "",
					phoneNumber: "",
					postNumber: "",
					moren: 0

				},

	/* 			rules: {
					'name': [{
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					'phoneNumber': [{
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					}],
					'address': [{

						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					}],
					'addressInfo': [{

						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					}],
				}, */
				radio: '',
				switchVal: false
			};
		},
		onLoad: function(options) {
			var id = options.id;
			id = parseInt(id)
			if (isNaN(id)) {
				id = 0;
			}
			var the = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					the.form.latitude = res.latitude
					the.form.longitude = res.longitude
				}
			});
			if (id > 0) {
				findByIdAddress(id).then(res => {
					the.form = res
				})
			} else {
				the.form = {
					name: the.userInfo.nameZh,
					phoneNumber: the.userInfo.phone
				}
			}
		},
		methods: {

			submit: function() {
				console.log(this.form)
				var the = this;
				this.$refs.uForm.validate().then(res => {
					//	console.log(res)
					var form = the.form;
					editAddress(form).then(r => {
						uni.$emit("addressEdit")
						uni.navigateBack({
							delta: 0
						})
					})
					//uni.$u.toast('校验通过')
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast(this.$t('校验失败'))
				})
			},
			getContact() {
				var the = this;
				uni.chooseContact({
					success(res) {
						console.log(res)
						the.form.phoneNumber = res.phoneNumber;
						the.form.name = res.displayName;
					},
					fail(e) {
						console.log(e)
					}
				})
			},
			getAddress() {
				uni.chooseLocation({
					complete() {

					},
					success(res) {
						console.log(res)
					},
					fail(e) {
						console.log(e)
					}
				})
			},
			chooseLocation: function() {
				var the = this
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									the.getLocation();
								},
								fail() {
									uni.showModal({
										title: this.$t('提示'),
										content: this.$t('您需要授权位置信息才能使用此功能'),
										showCancel: false
									});
								}
							});
						} else {
							the.getLocation();
						}
					}
				});
			},

			getLocation: function() {
				var the = this;
				uni.choosePoi({
					type: 2,
					success: function(res) {
						console.log('选择的地址信息：', res);
						if (res.type == 2) {
							var address = res.address;
							var addressFrist = address.substring(0, address.indexOf("地区") + 2);
							address = address.replace(addressFrist, "")
							the.form.addressName = res.name;
							the.form.address = addressFrist;
							the.form.addressInfo = address;
							the.form.latitude = res.latitude
							the.form.longitude = res.longitude
						} else {
							uni.showToast({
								title: this.$t("选择地址")
							})
						}
					},
					fail: function(res) {
						console.log('选择地址失败：', res);
					}
				});
			},
			getL() {
				wx.openLocation({
					success: function(e) {
						console.log(e)
					},
					fail: function(e) {
						console.log(e)
					}
				})
			}
		},
	};
</script>

<style>

</style>